<template>
  <div>
    <UserAuthorizationAllocation ref="UserAuthorizationAllocationRef" />
    <a-card class="general-card" title="可用用户授权">
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="8">
          <OrganizationKeywordSearchTree
            ref="organizationKeywordSearchTreeRef"
            :is-edit="true"
            @select="handleClickTreeNode"
          ></OrganizationKeywordSearchTree>
        </a-col>
        <a-col :span="16">
          <a-row>
            <a-col :flex="1">
              <a-form
                :model="formTableModel"
                :label-col-props="{ span: 18 }"
                :wrapper-col-props="{ span: 18 }"
                label-align="left"
              >
                <a-row :gutter="12">
                  <a-col :span="12">
                    <a-form-item field="loginName">
                      <a-input
                        v-model="formTableModel.loginName"
                        allow-clear
                        :placeholder="
                          $t('searchTable.form.loginName.placeholder')
                        "
                      />
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </a-col>
            <a-col :flex="'86px'" style="text-align: right">
              <a-space direction="vertical" :size="18">
                <a-button type="primary" @click="searchUser">
                  <template #icon>
                    <icon-search />
                  </template>
                  {{ $t('searchTable.form.search') }}
                </a-button>
              </a-space>
            </a-col>
          </a-row>
          <a-table
            row-key="id"
            :loading="loading"
            :pagination="{
              current: pagination.page,
              total: pagination.total,
              pageSize: pagination.rows,
              showTotal: true,
              showPageSize: true,
            }"
            :data="renderUserData.rows"
            :bordered="false"
            @page-change="onPageChange"
            @page-size-change="onPageSizeChange"
          >
            <template #columns>
              <a-table-column title="序号" :width="60">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="用户名" data-index="loginName" />
              <a-table-column title="人员名称" data-index="name" />
              <a-table-column title="岗位名称" data-index="positionName">
                <template #cell="{ record }">
                  {{
                    record.positionInfo.map((item: any) => item.name).join(',')
                  }}
                </template>
              </a-table-column>
              <a-table-column
                :title="$t('user.roleName')"
                data-index="roleName"
              >
                <template #cell="{ record }">
                  {{ record.roleInfo.map((item: any) => item.name).join(',') }}
                </template>
              </a-table-column>
              <a-table-column
                :title="$t('user.sysInnerFlag')"
                data-index="sysInnerFlag"
              >
                <template #cell="{ record }">
                  {{ record.sysInnerFlag == 0 ? '非内置' : '内置' }}
                </template>
              </a-table-column>
              <a-table-column
                :title="$t('columns.operations')"
                align="right"
                data-index="operations"
                :width="180"
              >
                <template #cell="{ record }">
                  <a-button
                    type="text"
                    size="small"
                    @click="handleClickToSave(record)"
                  >
                    用户授权
                  </a-button>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import useLoading from '@/hooks/loading';
  import { OrgVo } from '@/api/organization';
  import { selectPageUser, UserListParams, UserListRes } from '@/api/user';
  import UserAuthorizationAllocation from './user-authorization-allocation.vue';

  const userFormModel = () => {
    return {
      gender: '',
      loginName: '',
      personId: '',
      phone: '',
      positionId: '',
      roleId: '',
      tenantId: '',
      userId: '',
      organizationId: '',
      page: 1,
      rows: 20,
    };
  };
  const { loading, setLoading } = useLoading();
  const renderUserData = ref<UserListRes>({
    rows: [],
    total: 0,
  });
  const formTableModel = ref(userFormModel());
  const UserAuthorizationAllocationRef = ref();
  const handleClickToSave = (obj: OrgVo) => {
    UserAuthorizationAllocationRef.value.handleChangeVisible(obj);
  };

  const pagination = reactive({
    page: 1,
    rows: 20,
    total: 0,
  });

  const fetchUserData = async (
    params: UserListParams = { ...formTableModel.value, ...pagination }
  ) => {
    setLoading(true);
    try {
      const { data } = await selectPageUser(params);
      renderUserData.value = data;
      pagination.total = data.total;
    } catch (err) {
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };
  fetchUserData();
  const handleClickTreeNode = (node: any) => {
    formTableModel.value.organizationId = node.id;
    if (formTableModel.value.organizationId) {
      fetchUserData();
    }
  };
  const onPageChange = (current: number) => {
    pagination.page = current;
    fetchUserData();
  };
  const onPageSizeChange = (current: number) => {
    pagination.rows = current;
    fetchUserData();
  };
  const searchUser = () => {
    fetchUserData(formTableModel.value as UserListParams);
  };
</script>

<style scoped lang="less">
  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }
</style>
